<template>
  <div>
         <van-nav-bar
          title="我的课程"
          left-text="返回"
          right-text="编辑"
          left-arrow
      />
      <div class="nav_list">
        <div :class="['list_one',flag?'active':'']"       @click="getList('course')">我的课程</div>
        <div :class="['list_one',!flag?'active':'']"       @click="getList('collection')">我的收藏</div>
      </div>
      <div class="my_list">
        <van-swipe-cell  v-for="(item,index) in listdata" :key="index">
            <van-card
              :price="item.Cprice"
              :desc="item.Cdescribe"
              :title="item.Cname"
              class="goods-card"
              :thumb="'http://localhost:3000'+item.Cpic"
              @click="turnInfo(item.ID)"
            />
            <template #right>
              <van-button square text="删除" @click="delCollect(item.ID)" type="danger" class="delete-button" />
            </template>
          </van-swipe-cell>
      </div>
  </div>
</template>
<script>
import {myCourseApi,mycollectionApi,delCollection} from '../../api/course'
export default {
  data(){
    return{
      listdata:[],
      flag:true
    }
  },
  created(){
    this.getList('course')
  },
  methods:{
    turnInfo(ID){
      this.$router.push({name:"coursebuy",query:{ID:ID}})
    },
    // 取消收藏
    async  delCollect(ID){
        var res=await delCollection(ID)
        console.log(res)
        this.getList('collection') //从新获取收藏列表
    },
    async getList(status){
      // 我的课程数据获取
      if(status=="course"){
          let courseRes=await myCourseApi(localStorage.userName)
          console.log(courseRes)
          this.flag=true;
          this.listdata=courseRes.data;
      }
      // 我的收藏数据获取
      if(status=="collection"){
          let CollectRes=await mycollectionApi(localStorage.userName)
          console.log(CollectRes)
           this.flag=false;
           this.listdata=CollectRes.data;
      }
   
    }
  }
}
</script>
<style lang="less">
  .nav_list{
    width: 100%;
    height: 50px;
    bottom:1px solid #e5e5e5 ;
    box-sizing: border-box;
    display: flex;
    background: white;
    margin: 10px 0;
    justify-content: space-around;
    .list_one{
      width: 45%;
      line-height: 50px;
      position: relative;
      text-align: center;
      &:nth-child(1){
        border-right:1px solid #e5e5e5 ;
              }
      &:after{
        content: "";
        border-top:6px  solid transparent;
        border-bottom:6px  solid black;
        border-left:6px  solid transparent;
        border-right:6px  solid transparent;
        position:absolute;
        right: 20px;
        top:17px;
      }
    }
    .active{
      color:red;
      &:after{
          content: "";
          border-top:6px  solid red;
          border-bottom:6px  solid transparent;
          border-left:6px  solid transparent;
          border-right:6px  solid transparent;
          position:absolute;
          right: 20px;
          top:20px;
      }
    }
    
  }
   .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
</style>